<template>
	<view class="mykehu p20">
		<myNav>
			<view slot="left" @click="back"><uni-icons type="closeempty" color="#fff"></uni-icons></view>
			<view class="center">房源明细</view>
		</myNav>
		<view class="mingxi" style=" margin-top: 20px;">
			<view class="table">
				<view class="header">房间名称: 测试一号楼盘-测试一期-A区-七单元-11栋-2-3202</view>
				<view class="td">
					<view class="tdleft">客户</view>
					<view class="tdright">输入手机号查询</view>
				</view>
				<view class="td">
					<view class="tdleft">认购日期</view>
					<view class="tdright">3室2厅2卫</view>
				</view>
				<view class="td">
					<view class="tdleft">建筑面积</view>
					<view class="tdright">110.00 m2</view>
				</view>
				<view class="td">
					<view class="tdleft">建筑单价</view>
					<view class="tdright">13,000.00 元/m2</view>
				</view>
				<view class="td">
					<view class="tdleft">标准总价</view>
					<view class="tdright">1,400,000.00 元/m2</view>
				</view>
				<view class="td">
					<view class="tdleft">认购日期</view>
					<view class="tdright">2020-03-01</view>
				</view>
			</view>
		</view>
		<view class="fangshi">
			<view class="fangshititle">付款方式</view>
			<view class="case">
				<text class="active">商业付款1</text>
				<text>商业付款2</text>
			</view>
		</view>
		<view class="mingxi" style=" margin-top: 20px;">
			<view class="table">
				<view class="td">
					<view class="flex1">商业贷款</view>
					<view class="flex1">公积金贷款</view>
					<view class="flex1">组合贷款</view>
				</view>
				<view class="td no">
					<view class="youhui">
						<p>优惠 0 元</p>
						<p>标准总价*100折</p>
						<p>调整折扣</p>
					</view>
				</view>
				<view class="td">
					<view class="flex1">首付</view>
					<view class="flex1">30%</view>
					<view class="flex1">314000 元</view>
				</view>
				<view class="td">
					<view class="flex1">商业贷款</view>
					<view class="flex1">70%</view>
					<view class="flex1">314000 元</view>
				</view>
				<view class="td">
					<view class="tdleft">贷款期限</view>
					<view class="tdright">30年</view>
				</view>
				<view class="td">
					<view class="tdleft">贷款利率</view>
					<view class="tdright">4.9%</view>
				</view>
				<view class="td">
					<view class="flex1">还款方式</view>
					<view class="flex1"> 等额本息 </view>
					<view class="flex1">等额本金</view>
				</view>
			</view>
		</view>
		<view class="btn" style="margin-top: 20px;" @click="goto">开始计算</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import darkCalendar from '@/components/dark-calendar/dark-calendar';
import myNav from '../../components/mynav/mynav.vue';
import { searchedVistor } from '@/api/index.js';
import { MyShow } from '@/util/my.js';
export default {
	components: { myNav, darkCalendar },
	data() {
		return {
			para: ''
		};
	},
	methods: {
		back() {
			uni.switchTab({
				url: '../my/my'
			});
		},
		async searchedVistor() {
			//去请求接口
			//  todo 字段自己填充吧
			// console.log('去请求接口');
			try {
				let reslut = await searchedVistor({
					para: this.para
				});
				//成功
				new MyShow('需要渲染的字段').tixing();
			} catch (e) {
				//TODO handle the exception
				new MyShow('需要渲染的字段').tixing();
			}
		},
		gotoinfo(val) {
			uni.navigateTo({
				url: './p11'
			});
		},
		goto(val) {
			uni.navigateTo({
				url: './p26'
			});
		}
	}
};
</script>

<style lang="scss">
@import './main.scss';
.myright {
	display: flex;
	flex-direction: column;
	image {
		width: 20px;
		height: 20px;
	}
	margin-top: 40px;
	align-items: center;
	color: #ffffff;
	text {
		margin-top: 5px;
	}
}
</style>
